<template>
  <div class="rich-editor-cont">
    <div class="rich-editor-inner" @click="focusLast">
      <RichInput ref="input" v-for="(conf, index) in list" :conf="conf" :list="list" :index="index" :key="index" :focus="focus"/>
    </div>
  </div>
</template>
<script>
import RichInput from "../../units/RichInput";
export default {
  name: 'home',
  components: {RichInput},
  data() {
    return {list: [{type: "txt", txt: ""},]}
  },
  mounted() {this.focus();},
  methods: {
    focusLast(){this.focus(this.list.length - 1)},
    focus(index = 0, position){
      const $el = this.$refs.input[index].$refs.input;
      $el.focus();
      setTimeout(() => {
        position === undefined && (position = $el.value.length);
        if (position && position >= $el.value.length) position = $el.value.length;
        if (position < 0) position = 0;
        $el.selectionStart = position;
        $el.selectionEnd = position;
      }, 0);
    },
  },
}
</script>
<style scoped>
  .rich-editor-cont{
    padding: 20px;
    border-radius: 4px;
    height: 100%;
    background-color: #99d64e;
  }
  .rich-editor-cont > div::-webkit-scrollbar {
    background: transparent;
  }
  .rich-editor-inner {
    height: 100%;
    overflow: auto;
  }
</style>
